<script setup lang="ts">
// v-model指令:收集表单数据，数据双向绑定
// v-model也可以实现父子组件数据通信
import {ref} from 'vue';
// 引入子组件
import Child from "@/views/Vmodel/Child.vue";
import Child1 from "@/views/Vmodel/Child1.vue";
let info = ref('');
let money = ref(1000);
const handler = (num:number) =>{
  // 接收子组件修改的数据
  console.log(num);
  money.value=num;
}
let pageNow = ref(1)
let pageSize =ref(4)
</script>

<template>
  <div class="box">
    <h1>v-model钱数:{{money}}
      <br />
      pageNow{{pageNow}}
      pageSize{{pageSize}}
    </h1>
    <el-input v-model="info" type="text" input-style="height:50px"></el-input>
    <hr />
<!--    <Child :modelValue="money" @update:modelValue="handler"></Child>-->
<!--    上面的第一种方法是v-model的语法糖
        第一:相当于给子组件传递了数据props[modelValue] =1000
        第二:相当于子组件绑定事件update:modelValue
-->
    <Child v-model="money"></Child>
    <Child1 v-model:pageNow="pageNow" v-model:pageSize="pageSize"></Child1>
  </div>
</template>

<style scoped>
.box {
  border: 3px solid salmon;
  height:900px;
}
</style>
